const { createApp } = Vue;

createApp({
    data() {
        return {
            isLoading: {},
            models: [
                {
                    title: '2倍超分辨率重建模型',
                    description: '基于多视点图像分析的2倍超分辨率重建',
                    inputs: [
                        'image_url: 输入图像URL (string)',
                        'scale_factor: 缩放比例 (int, 最大为2)'
                    ],
                    outputs: [
                        'processed_url: 处理图像URL',
                        'status_code: 处理状态码'
                    ],
                    url: './model1.html'
                },
                {
                    title: '4倍单视点超分辨率重建模型',
                    description: '单视点图像分析的4倍超分辨率重建',
                    inputs: [
                        'image_url: 输入图像URL (string)',
                        'scale_factor: 缩放比例 (int, 最大为4)'
                    ],
                    outputs: [
                        'processed_url: 处理图像URL',
                        'status_code: 处理状态码'
                    ],
                    url: './model2.html'
                },
                {
                    title: '8倍超分辨率重建模型',
                    description: '单视点图像分析的8倍超分辨率重建',
                    inputs: [
                        'image_url: 输入图像URL (string)',
                        'scale_factor: 缩放比例 (int, 最大为8)'
                    ],
                    outputs: [
                        'processed_url: 处理图像URL',
                        'status_code: 处理状态码'
                    ],
                    url: './model3.html'
                },
            ]
        }
    },
    methods: {
        navigateTo(url, index) {
            // 修改为直接操作响应式对象
            this.isLoading = { ...this.isLoading, [index]: true };
            // 模拟跳转延迟
            setTimeout(() => {
                window.location.href = url;
                // 使用对象展开运算符重置状态
                this.isLoading = { ...this.isLoading, [index]: false };
            }, 400);
        }
    },
    mounted() {
        window.addEventListener('load', () => {
            // 添加淡入过渡
            document.getElementById('app').style.opacity = 1;

            // 延迟触发入场动画
            setTimeout(() => {
                document.querySelector('.header').classList.add('loaded');
                document.querySelector('.model-container').classList.add('loaded');
                document.querySelector('.header h1').style.animation =
                    'textGlow 2s ease-in-out 1s infinite alternate';
            }, 300); // 适当延迟确保过渡效果
        });
    }
}).mount('#app');